梦入琼楼寒有月，行过石树冻无烟

Vue.js MVVM at ViewModel

2022-04-21

Vue(/vju:/，类似与 view)，是由尤雨溪所开发的一种前端js框架，以vue为中心的vue 库最为出名，其中知名的有vue-data、vue-table……分别运用在数据大屏以及表格处理方面，其中vue主要用于构建用户界面的渐进式框架，核心库只支持前端显示。

而渐进式框架主要是：“一开始不需要完全掌握全部功能，到后面会慢慢的提升”，就以vue-data为例，即使光通过官方文档也可以快速上手，这与vue.js的成功密切相关。

Vue 的部分设计理念遵守了 MVVM（Model-view-viewmodel） 软件架构模式，用于构建用户界面的渐进式框架，是被一个设计自低向上逐层应用。

通过 MVVM 有助于将图形用户界面的开发和业务逻辑的开发分离开来，因此 Vue 也是一个用于构建用户界面的渐进式框架

虽然并没有完全遵守 MVVM 模型，但 Vue 在设计上收到了启发，因此对于 vm,ViewModel 通常用于表示组件的实例。

vue.js 的官方文档是写的最为详细的框架文档之一，这与其vue.js发展之出的Laravel 社区文档出现了对比，如果按照通俗的话来讲就是“教你造车但不教你开车”，这也是vue.js如此成功的关键因素之一，其二就是由于vue.js是由国人所开发的，这也增加了vue.js在国内的受欢迎程度不同类框架第一影响更好。

对于学习我们可以直接使用最新的 Vue CDN 进行引入：<script src="https://unpkg.com/vue@next"></script>

MVVM

MVVM（Model-view-viewmodel）即表示 **view(视图)\viewModel(视图模型)\Model(模型)**，是一种软件的架构模式，其中 View 的主要作用就是向用户显示数据上下文中可用的数据，并与用户进行数据交互。

而之后的 ViewModel 是用于作为视图(VIew)和模型(Model)之间的桥梁，在 MVC 的软家架构模式中可以表示为 Controller 控制器，，MVVM 模式试图通过 MVC 所提供的数据绑定的优势通过框架尽可能的接近于应用程序模型，他使用绑定器以及视图模型。

MVVM 不同于 MVC，在MVVM 模式中将 ViewModel 层绑定到 View 曾后基本上不会使用点击事件，而是使用命令（Command）来控制，并通过 Binding 来绑定相关数据。

对于 Model 是指所需数据的对象建模，这通常用于数据库建模并直接进行映射到数据中，类似与 Laravel 以及 Sequelize 中的 Model

ViewModel

ViewModel 是 Vue 的核心框架也是一个 Vue 实例，作用与某一个 HTML 元素之上，通常为指定的 ID 元素。当创建了一个 ViewModel 后，最为核心的就是双向绑定，主要以 DOM Listeners(DOM 侦听器)和 Data Bindings(数据绑定) 为主。DOM Listeners 会检测 View 上的元素变化，如有变化则会更改 Model 中的数据; 当更改 Model 数据时， DataBingdings 则会更新页面中的 DOM 元素。因此最后的 app 元素下所绑定的 {{message}} 则会返回 hey,world 来将此渲染进 DOM 系统。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="https://unpkg.com/vue@next"></script></head>
<body>
<div id="app">
    {{message}}
</div>
<script>
    var App = {
        data() {
            return {
                message: 'hey,world!'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>
</body>
</html>

在 Vue3.0 版本中，Vue 应用都是通过 createApp 函数创建一个新的应用实例，如：

1
2
3
4
5
6
7
8
var App = {
    data() {
        return {
            message: 'hey,world!'
        }
    }
}
Vue.createApp(App).mount("#app")

但上述这种只是一种非常简单的写法，还有另一种写法是类似与更加符合 MVVM 模型的，Vue 的设计收到此启发但在文档中也会使用 vm(ViewModel) 进行缩写。

1
2
3
4
5
const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')
⬅️ Go back